<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>旅途探索 - 景点浏览</title>
    <style>
        .hot-tag {
            @apply absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded;
        }
    </style>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6', // 定义蓝色为主色调
                        secondary: '#64748b' // 定义灰色为辅助色
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-100">
<!-- 导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16 md:h-20">
            <!-- Logo -->
            <a href="#" class="flex items-center space-x-2">
                <i class="fa fa-map-marker text-primary text-2xl"></i>
                <span class="text-xl font-bold text-primary">旅途探索</span>
            </a>

            <!-- 主导航与搜索框 -->
            <div class="flex items-center flex-1 max-w-xl mx-8">
                <!-- 搜索框（按景点名搜索） -->
                <div class="relative w-full">
                    <input
                            type="text"
                            id="sightSearch"
                            placeholder="搜索景点名称..."
                            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
                    >
                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                    <button id="sightSearchBtn" class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-primary text-white rounded-md text-sm hover:bg-primary/90 transition-colors">
                        搜索
                    </button>
                </div>
            </div>

            <!-- 功能按钮 -->
            <nav class="flex items-center space-x-6">
                <a href="#" class="text-primary font-medium">首页</a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">留言</a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">咨询</a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">景点门票购买</a>

                <button class="text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-heart-o text-lg"></i>
                </button>
                <button class="text-gray-500 hover:text-primary transition-colors relative">
                    <i class="fa fa-shopping-cart text-lg"></i>
                    <span class="absolute -top-2 -right-2 bg-secondary text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">0</span>
                </button>
                <a href="#" class="block">
                    <img src="https://picsum.photos/40/40?random=1" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent hover:border-primary transition-colors">
                </a>
            </nav>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-8">
    <!-- 筛选区域 -->
    <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
        <div class="flex flex-col md:flex-row items-center justify-between gap-4">
            <!-- 城市筛选 -->
            <div>
                <label for="cityFilter" class="block text-sm font-medium text-gray-700 mb-1">选择城市</label>
                <select id="cityFilter" class="w-full md:w-48 px-3 py-2 border border-gray-300 rounded">
                    <option value="">全部城市</option>
                    <option value="北京市">北京市</option>
                    <option value="上海市">上海市</option>
                    <option value="广州市">广州市</option>
                    <option value="杭州市">杭州市</option>
                </select>
            </div>

            <!-- 热门筛选 -->
            <div class="flex items-center gap-2">
                <input type="checkbox" id="hotFilter" class="form-checkbox h-4 w-4 text-primary">
                <label for="hotFilter" class="text-sm text-gray-700">仅显示热门景点</label>
            </div>

        </div>
    </div>

    <!-- 景点列表 -->
    <div id="sightList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 由JS动态生成 -->
    </div>

    <!-- 分页 -->
    <div class="mt-8 flex justify-center">
        <nav class="inline-flex space-x-2">
            <button class="px-3 py-2 bg-white border border-gray-300 rounded hover:bg-gray-100" id="prePage">上一页</button>
            <!-- 页码信息显示 -->
            <span class="px-3 py-2 bg-white border border-gray-300 rounded" id="pageInfo"></span>
            <button class="px-3 py-2 bg-white border border-gray-300 rounded hover:bg-gray-100" id="nextPage">下一页</button>
        </nav>
    </div>
</main>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

    const sights = [];
    $(document).ready(function() {
        window.currentState = {
            pageNo: 1,
            likeValue: "", // 可能是搜索关键词或城市
            isHot: 0 // 0-不筛选热门，1-筛选热门
        };

        // 从URL初始化状态
        const urlParams = new URLSearchParams(window.location.search);
        window.currentState.pageNo = parseInt(urlParams.get("pageNo") || "1");
        window.currentState.likeValue = urlParams.get("likeValue") || "";

        // 城市筛选：更新likeValue并重置页码
        $("#cityFilter").on("change", function() {
            window.currentState.likeValue = $(this).val();
            window.currentState.pageNo = 1; // 筛选后从第1页开始
            window.currentState.isHot = 0; // 切换城市时默认取消热门筛选
            selectByPage(window.currentState.pageNo, window.currentState.likeValue);
        });

        // 热门筛选：根据状态动态更新参数
        $("#hotFilter").on("change", function() {
            const isHotChecked = $(this).prop("checked");
            // 更新全局状态（关键：同步当前是否筛选热门）
            window.currentState.isHot = isHotChecked ? 1 : 0;
            window.currentState.pageNo = 1; // 筛选状态变化时，强制从第1页开始
            if (isHotChecked) {
                // 传递当前最新的likeValue（可能是城市或搜索词）和is_hot
                selectByHot(
                    window.currentState.pageNo,
                    window.currentState.likeValue,
                    window.currentState.isHot
                );
            } else {
                // 取消热门时，用当前的likeValue重新加载第1页
                selectByPage(
                    window.currentState.pageNo,
                    window.currentState.likeValue
                );
            }

        });
        $("#sightSearch").on("change",function (){
            window.currentState.likeValue=$(this).val();
            window.currentState.pageNo = 1; // 筛选后从第1页开始
            window.currentState.isHot = 0; // 切换城市时默认取消热门筛选
            selectByPage(window.currentState.pageNo, window.currentState.likeValue);
        })
        $("#sightSearchBtn").on("click", function () {
            window.currentState.likeValue=$("#sightSearch").val().trim();
            window.currentState.pageNo = 1;
            window.currentState.isHot=0;
            selectByPage(window.currentState.pageNo, window.currentState.likeValue);
        })
        // 初始加载：使用全局状态
        selectByPage(window.currentState.pageNo, window.currentState.likeValue);
    });
    function selectByPage(pageNo,likeValue) {
        var url = "/tourismsystem/selectByPage.spot"
        var param = {
            "pageNo": pageNo,
            "likeValue": likeValue
        };
        select(url,param);
    }
    function selectByHot(pageNo,likeValue,is_hot){
        var url = "/tourismsystem/selectByHot.spot"
        var param = {
            "pageNo": pageNo,
            "likeValue": likeValue,
            "is_hot":is_hot
        };
        select(url,param);
    }
        function select(url,param){
        $.post(url,param,function (data){
            var jsonObj=JSON.parse(data)
            var recordList=jsonObj.recordList;
            // 更新全局分页状态（关键：保存当前页码和搜索词）
            currentPageNo = jsonObj.pageNo;
            currentLikeValue = jsonObj.likeValue;
            sights.splice(0,sights.length);//清空const数组中原有数据，防止const报错
            for (let i = 0; i < recordList.length; i++) {
                // 构造单个景点对象（使用let声明局部变量，避免全局污染）
                let sight = {
                    sight_id: recordList[i].sight_id,
                    sight_name: recordList[i].sight_name,
                    city: recordList[i].city,
                    introduction: recordList[i].introduction,
                    img_path: recordList[i].img_path,
                    is_hot: recordList[i].is_hot
                };
                // 推入数组
                sights.push(sight);
            }
            renderSights(sights);
            document.getElementById('pageInfo').textContent = `第${jsonObj.pageNo}页，共${jsonObj.totalPages}页`;
            $("#prePage").off('click').on('click', function (e) {
                e.preventDefault(); // 阻止按钮默认行为（如提交表单）
                let newPageNo = window.currentPageNo - 1;
                if (newPageNo < 1) newPageNo = 1; // 防止页码小于1
                if (window.currentState.isHot===1){
                    selectByHot(newPageNo,window.currentState.likeValue,window.currentState.isHot);
                }else {
                    selectByPage(newPageNo, window.currentState.likeValue);
                }
            });

            // 绑定“下一页”点击事件
            $("#nextPage").off('click').on('click', function (e) {
                e.preventDefault();
                let newPageNo = window.currentPageNo + 1;
                if (newPageNo > jsonObj.totalPages) {
                    newPageNo = jsonObj.totalPages; // 防止页码超过总页数
                }
                if (window.currentState.isHot===1){
                    selectByHot(newPageNo,window.currentState.likeValue,window.currentState.isHot);
                }else {
                    selectByPage(newPageNo, window.currentState.likeValue);
                }
                window.currentState.pageNo = newPageNo;
            })

        })

    }

    // 渲染景点列表
    function renderSights(filteredData) {
        const listContainer = document.getElementById('sightList');
        listContainer.innerHTML = filteredData.map(sight => `
    <!-- 卡片容器：relative 用于定位内部元素 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden relative">
      <!-- 热门标签：左上角绝对定位 -->
      ${sight.is_hot ? `
        <span class="hot-tag absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">热门</span>
      ` : ''}
      <!-- 图片：填充容器，保持比例（会裁剪边缘，优先展示中间内容） -->
      <img
        src="${sight.img_path}"
        alt="${sight.sight_name}"
        class="w-full h-48 object-cover"  <!-- 关键：填充容器，比例不变 -->
      >
      <!-- 文字层：绝对定位在底部，加半透明背景渐变 -->
      <div class="absolute bottom-0 left-0 right-0 p-4
                  bg-gradient-to-t from-black/50 to-transparent text-white">
        <h3 class="text-lg font-semibold">${sight.sight_name}</h3>
        <p class="text-sm text-gray-300 mt-2">城市：${sight.city}</p>
        <p class="text-sm text-gray-200 mt-2 line-clamp-2">${sight.introduction}</p>
        <a href="/tourismsystem/toDetail.detail?sight_id=${sight.sight_id}" class="mt-4 inline-block text-blue-500 hover:underline">查看详情</a>
      </div>
    </div>
  `).join('');
    }
    // 初始渲染
    renderSights(sights);
</script>
</body>
</html>